<template>
	<view class='food-box'>
		<view class='food2-box'>
			<view class='food2-item' v-for="(food, foodIndex) in foods" :key="foodIndex" scroll-x="true" scroll-y="false">
				<image :src='food.cover' mode="widthFix" class='food2-image'></image>
				<view class='image-name'>{{food.name}}</view>
			</view>
		</view>
		<view class='food-change'>换一批</view>
	</view>
</template>

<script>
	export default {
		name:"food2",
		props: {
			foods: {
				type: Array,
				default: [],
				required: true,
				validator: function(value) {
					console.log('--------------validator----------------');
					return true;
				}
			}
		},
		data() {
			return {
			};
		},
		mounted(){
			console.log('------------mounted------------------');
		},
		updated(){
			console.log('------------updated------------------');
		}
	}
</script>

<style>
	.food-box{
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
	}
	
	.food2-box{
		display: -webkit-inline-box;
		flex-wrap: wrap;
		width: 100%;
	}
	
	.food2-item{
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: center;
		width: calc( 50% - 12px );
		height: 100%;
		position: relative;
		padding: 0px 6px;
		margin-bottom: 6px;
	}
	
	.food2-image{
		border-radius: 10px;
		width: 100%;
	}
	
	.image-name{
		font-size: 14px;
		color: #fff;
		position: absolute;
		bottom: 0px;
		left: 6px;
		width: calc( 100% - 24px );
		background-color: rgba(0,0,0,0.5);
		height: 24px;
		border-bottom-left-radius: 6px;
		border-bottom-right-radius: 6px;
		height: 32px;
		line-height:32px;
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		word-break: break-all;
		padding: 0px 6px;
		font-size: 12px;
	}
	
	.food-change{
		color: #33b4ff;
		font-size: 10px;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		padding: 4px 10px;
		border: 1px solid #33b4ff;
		border-radius: 16px;
	}
</style>